<template>
  <div>
    <div style="margin-bottom: 30px">
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" v-print="'#startprint'">打印</el-button>
    </div>
    <div style="display: flex" id="startprint">
      <div style="width: 300px" class="table-d">
        <table id="tableId" ref="table" class="table-wrap">
          <tr>
            <td
              rowspan="1"
              colspan="18"
              style="font-weight: bold; font-size: 28px; height: 60px; text-align: center"
            >
              维修报价单
            </td>
          </tr>

          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">客户名称</td>
            <td rowspan="1" colspan="3">{{ detailData.customerName }}</td>
            <td rowspan="1" colspan="3" class="td-label-input">客户编号</td>
            <td rowspan="1" colspan="3">{{ detailData.customerId }}</td>
            <td rowspan="1" colspan="3" class="td-label-input">联系人</td>
            <td rowspan="1" colspan="3">{{ detailData.customerContact }}</td>
          </tr>
          <tr>
            <td rowspan="1" colspan="1" class="td-label-input">订单号</td>
            <td rowspan="1" colspan="4">{{ detailData.orderCode }}</td>
            <td rowspan="1" colspan="1" class="td-label-input">车型</td>
            <td rowspan="1" colspan="4">{{ detailData.modelName }}</td>
            <td rowspan="1" colspan="1" class="td-label-input">车身颜色</td>
            <td rowspan="1" colspan="2">{{ detailData.modelColor }}</td>
            <td rowspan="1" colspan="1" class="td-label-input">车架号</td>
            <td rowspan="1" colspan="4">{{ detailData.vinCode }}</td>
          </tr>
          <tr style="text-align: center">
            <td rowspan="1" colspan="18">固定收费项目</td>
          </tr>
          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">复检费用</td>
            <td rowspan="1" colspan="3">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.extra0 }}</div>
              </div>
            </td>
            <td rowspan="1" colspan="3" class="td-label-input">固定整备费用</td>
            <td rowspan="1" colspan="3">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.extra1 }}</div>
              </div>
            </td>
            <td rowspan="1" colspan="3" class="td-label-input">质检&认证费用</td>
            <td rowspan="1" colspan="3">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.extra2 }}</div>
              </div>
            </td>
          </tr>

          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">质保权益</td>
            <td rowspan="1" colspan="3">{{ detailData.extra3 }}</td>
            <td rowspan="1" colspan="3" class="td-label-input">运输价格</td>
            <td rowspan="1" colspan="12">{{ detailData.extra4 }}</td>
          </tr>
          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">费用金额大写</td>
            <td rowspan="1" colspan="8">{{ detailData.extraTotalName }}</td>
            <td rowspan="1" colspan="7">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.extraTotal }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td style="" colspan="18" json-table-type="grid-area">
              <el-table
                :data="detailData.repairList"
                border
                style="width: 100%; height: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column label="维修报价清单">
                  <el-table-column type="index" width="50"> </el-table-column>
                  <el-table-column prop="ss" label="故障区域"> </el-table-column>
                  <el-table-column prop="repairItem" label="维修项目" width="150">
                  </el-table-column>
                  <el-table-column prop="repairQuote" label="工时费"> </el-table-column>
                  <el-table-column prop="itemName" label="配件名称"> </el-table-column>
                  <el-table-column prop="itemQuote" label="单价"> </el-table-column>
                  <el-table-column prop="itemCount" label="数量"> </el-table-column>
                  <el-table-column prop="itemTotal" label="配件费用"> </el-table-column>
                  <el-table-column prop="lineTotal" label="费用合计">
                    <template slot-scope="scope">
                      <div style="display: flex; justify-content: space-around">
                        <div>￥</div>
                        <div>{{ scope.row.lineTotal }}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mark" label="备注"> </el-table-column>
                </el-table-column>
              </el-table>
            </td>
          </tr>
          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">报价费用金额大写</td>
            <td rowspan="1" colspan="8">{{ detailData.repairTotalName }}</td>
            <td rowspan="1" colspan="7">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.repairTotal }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td rowspan="1" colspan="3" class="td-label-input">总报价费用金额大写</td>
            <td rowspan="1" colspan="8">{{ detailData.allTotalName }}</td>
            <td rowspan="1" colspan="7">
              <div style="display: flex; justify-content: space-around">
                <div>￥</div>
                <div>{{ detailData.allTotal }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td rowspan="1" colspan="17">
              <div style="display: flex; justify-content: space-around">
                <div>客户签名：</div>
                <div>本人同意所列维修项目并支付相关金额</div>
              </div>
            </td>
          </tr>

          <tr style="height: 60px">
            <td rowspan="1" colspan="1" style="width: 60px">备注</td>
            <td rowspan="1" colspan="17"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { quoteOrderGetById } from '@/api/quote/order'
export default {
  name: 'orderPrint',
  mixins: [],
  data() {
    return {
      orderId: '',
      detailData: {}
    }
  },
  computed: {},
  created() {
    this.orderId = this.$route.query.id
    this.init()
  },
  methods: {
    getFixedNumber(num) {
      Math.floor(num * 100) / 100
      num = parseFloat(num.toFixed(2))
      return num
    },
    changeNumMoneyToChinese(money) {
      var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖') //汉字的数字
      var cnIntRadice = new Array('', '拾', '佰', '仟') //基本单位
      var cnIntUnits = new Array('', '万', '亿', '兆') //对应整数部分扩展单位
      var cnDecUnits = new Array('角', '分', '毫', '厘') //对应小数部分单位
      var cnInteger = '整' //整数金额时后面跟的字符
      var cnIntLast = '元' //整型完以后的单位
      var maxNum = 999999999999999.9999 //最大处理的数字
      var IntegerNum //金额整数部分
      var DecimalNum //金额小数部分
      var ChineseStr = '' //输出的中文金额字符串
      var parts //分离金额后用的数组，预定义
      var Symbol = '' //正负值标记
      if (money == '') {
        return ''
      }

      money = parseFloat(money)
      if (money >= maxNum) {
        alert('超出最大处理数字')
        return ''
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger
        return ChineseStr
      }
      if (money < 0) {
        money = -money
        Symbol = '负 '
      }
      money = money.toString() //转换为字符串
      if (money.indexOf('.') == -1) {
        IntegerNum = money
        DecimalNum = ''
      } else {
        parts = money.split('.')
        IntegerNum = parts[0]
        DecimalNum = parts[1].substr(0, 4)
      }
      if (parseInt(IntegerNum, 10) > 0) {
        //获取整型部分转换
        var zeroCount = 0
        var IntLen = IntegerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = IntegerNum.substr(i, 1)
          var p = IntLen - i - 1
          var q = p / 4
          var m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0]
            }
            zeroCount = 0 //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q]
          }
        }
        ChineseStr += cnIntLast
        //整型部分处理完毕
      }
      if (DecimalNum != '') {
        //小数部分
        var decLen = DecimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = DecimalNum.substr(i, 1)
          if (n != '0') {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (DecimalNum == '') {
        ChineseStr += cnInteger
      }
      ChineseStr = Symbol + ChineseStr

      return ChineseStr
    },
    init() {
      quoteOrderGetById(this.orderId)
        .then((res) => {
          let temp = []
          let dataItem = {}
          let extraTotal = 0
          let repairTotal = 0
          let allTotal = 0
          res.data.result.repairList.forEach((item, index) => {
            let itemTotal = this.getFixedNumber(item.itemQuote * item.itemCount)
            let lineTotal = this.getFixedNumber(itemTotal + item.repairQuote)
            repairTotal = this.getFixedNumber(repairTotal + lineTotal)
            let newItem = {
              ...item,
              itemTotal,
              lineTotal
            }
            temp.push(newItem)
          })
          res.data.result.extraList.forEach((item, index) => {
            dataItem[`extra${item.extraId}`] = item.extraQuote
            extraTotal = this.getFixedNumber(extraTotal + item.extraQuote)
          })
          allTotal = this.getFixedNumber(extraTotal + repairTotal)
          this.detailData = {
            ...res.data.result,
            repairList: temp,
            ...dataItem,
            extraTotal,
            repairTotal,
            allTotal,
            extraTotalName: this.changeNumMoneyToChinese(extraTotal),
            repairTotalName: this.changeNumMoneyToChinese(repairTotal),
            allTotalName: this.changeNumMoneyToChinese(allTotal)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

td,
th {
  border: 1px solid #bbb;
  padding: 5px;
  text-align: center;
}
</style>
